<template>
  <div class="video-call-window">
    <!-- 加载提示 -->
    <div 
      v-if="loading" 
      class="loading-overlay"
      v-loading="loading"
      element-loading-text="正在加载视频配置..."
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
    </div>

    <!-- 视频界面 -->
    <div v-if="!loading && dialogConfig" class="video-container">
      <!-- 标题栏 -->
      <div class="video-header">
        <div class="header-info">
          <el-icon><VideoCamera /></el-icon>
          <span class="title">视频聊天</span>
        </div>
      </div>

      <!-- 视频内容 -->
      <div class="video-content">
        <!-- 主视频区域 -->
        <div class="main-video">
          <video ref="mainVideoRef" autoplay playsinline></video>
          <div class="video-overlay">
            <div class="call-status">
              <el-icon class="status-icon"><Connection /></el-icon>
              <span class="status-text">正在通话中...</span>
            </div>
            <div class="call-timer">
              {{ formatTime(callDuration) }}
            </div>
          </div>
        </div>

        <!-- 小视频区域 -->
        <div class="small-video">
          <video ref="smallVideoRef" autoplay playsinline muted></video>
        </div>

        <!-- 控制按钮 -->
        <div class="video-controls">
          <el-button type="danger" circle @click="endCall">
            <el-icon><VideoCameraFilled /></el-icon>
          </el-button>
          <el-button type="info" circle @click="toggleMute">
            <el-icon><Microphone v-if="!isMuted" /><Mute v-else /></el-icon>
          </el-button>
          <el-button type="warning" circle @click="toggleCamera">
            <el-icon><VideoCamera v-if="!isCameraOff" /><VideoCameraFilled v-else /></el-icon>
          </el-button>
          <el-button type="success" circle @click="toggleScreen">
            <el-icon><Monitor /></el-icon>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-if="!loading && !dialogConfig" class="error-container">
      <el-result
        icon="error"
        title="加载失败"
        sub-title="无法加载视频配置"
      >
        <template #extra>
          <el-button type="primary" @click="reloadConfig">重新加载</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  VideoCamera, VideoCameraFilled, Microphone, Mute,
  Monitor, Connection
} from '@element-plus/icons-vue'
import { dialogApi } from '@/api/scene'

// 类型定义
interface DialogConfig {
  id: number
  scene_id: string
  dialog_size: {
    width: number
    height: number
  }
  transparency: number
}

// 响应式数据
const loading = ref(true)
const dialogConfig = ref<DialogConfig | null>(null)
const callDuration = ref(0)
const isMuted = ref(false)
const isCameraOff = ref(false)
const isScreenSharing = ref(false)
const mainVideoRef = ref<HTMLVideoElement | null>(null)
const smallVideoRef = ref<HTMLVideoElement | null>(null)
let timer: number | null = null

// 方法
const loadDialogConfig = async () => {
  try {
    loading.value = true
    const urlParams = new URLSearchParams(window.location.search)
    const sceneId = urlParams.get('scene_id')
    
    if (!sceneId) {
      throw new Error('缺少场景ID参数')
    }
    
    const response = await dialogApi.getDialogByScene(sceneId)
    dialogConfig.value = response
    
    // 设置窗口透明度
    if (response.transparency < 100) {
      document.body.style.opacity = (response.transparency / 100).toString()
    }
    
  } catch (error) {
    console.error('加载视频配置失败:', error)
    ElMessage.error('加载配置失败')
  } finally {
    loading.value = false
  }
}

const reloadConfig = () => {
  loadDialogConfig()
}

const formatTime = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

const endCall = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  window.close()
}

const toggleMute = () => {
  isMuted.value = !isMuted.value
  ElMessage.info(isMuted.value ? '已静音' : '已取消静音')
}

const toggleCamera = () => {
  isCameraOff.value = !isCameraOff.value
  ElMessage.info(isCameraOff.value ? '已关闭摄像头' : '已开启摄像头')
}

const toggleScreen = () => {
  isScreenSharing.value = !isScreenSharing.value
  ElMessage.info(isScreenSharing.value ? '已开启屏幕共享' : '已关闭屏幕共享')
}

// 生命周期
onMounted(() => {
  loadDialogConfig()
  timer = window.setInterval(() => {
    callDuration.value++
  }, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<style scoped>
.video-call-window {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  flex-shrink: 0;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title {
  font-weight: 600;
  font-size: 14px;
}

.video-content {
  flex: 1;
  position: relative;
  background: #000;
}

.main-video {
  width: 100%;
  height: 100%;
  position: relative;
}

.main-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: white;
}

.call-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.status-icon {
  font-size: 48px;
  color: #67c23a;
}

.status-text {
  font-size: 16px;
}

.call-timer {
  font-size: 24px;
  font-weight: 500;
}

.small-video {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 160px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.small-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  padding: 15px 30px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 30px;
}

.video-controls .el-button {
  width: 50px;
  height: 50px;
  font-size: 20px;
}

.error-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}
</style> 